import variables from '@/styles/variables.module.scss';
import { useSettingsStore } from '@/store';
import { useThrottleFn } from '@vueuse/core';
export function useTableResize(isLayoutDisabled) {
  const tableHeight = ref(0);
  const formItemSpan = ref(0);
  const { tagsView } = useSettingsStore();
  const navbarHeight = parseInt(variables['navbar-height']);
  const tagsViewHeight = tagsView ? parseInt(variables['tags-view-height']) : 0;

  // 根据屏幕宽度计算 formItemSpan
  const getFormItemSpan = (width) => {
    if (width < 768) return 24;
    if (width < 992) return 12;
    if (width < 1200) return 8;
    if (width < 1920) return 6;
    return 4;
  };

  // 高度计算
  const calculateHeight = () => {
    const searchHeight =
      document.querySelector('.search-container')?.offsetHeight || 0;
    const padding = 20;
    const nolayoutHeight = window.innerHeight - (searchHeight + 10);
    const layoutHeight =
      window.innerHeight -
      (navbarHeight + tagsViewHeight + searchHeight + padding);
    return isLayoutDisabled.value ? nolayoutHeight : layoutHeight;
  };

  // 响应式窗口尺寸处理
  const updateMetrics = useThrottleFn(() => {
    formItemSpan.value = getFormItemSpan(window.innerWidth);
    tableHeight.value = calculateHeight();
  }, 200); // 200ms节流

  // 添加/移除监听器
  onMounted(() => {
    updateMetrics();
    window.addEventListener('resize', updateMetrics);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateMetrics);
  });

  return {
    formItemSpan,
    tableHeight,
  };
}
